<template>
  <div>

<el-form ref="form" :model="form" label-width="140px">
  <br>
  <el-form-item label="标题" >
    <el-input v-model="form.name" style="width: 400px"></el-input>
  </el-form-item>
  <el-form-item label="内容">
    <el-input type="textarea" v-model="form.desc" :rows="6" style="width: 800px"></el-input>
  </el-form-item>
  <el-form-item label="配图或视频(二选一)">
    <el-select v-model="form.region" placeholder="请选择图片或视频" >
      <el-option label="视频" value="video"></el-option>
      <el-option label="图片" value="picture"></el-option>
      <el-option label="暂无" value="not"></el-option>

    </el-select>
  </el-form-item>
<!--  图片上传组件-->
<!--  v-show="form.region == '图片' ? false : true"-->
  <div class="components-container" v-show="form.region === 'picture' ? true: false">

    <div class="editor-container">
      <dropzone id="myVueDropzone"
                url="https://httpbin.org/post"
                @dropzone-removedFile="dropzoneR"
                @dropzone-success="dropzoneS"  />
    </div>
  </div>

<!--  视频上传组件-->
  <div style="margin-left: 300px"v-show="form.region === 'video' ? true: false">
  <el-upload
    class="upload-demo"
    drag
    action="https://jsonplaceholder.typicode.com/posts/"
    multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">只能上传视频文件，且不超过20M </div>

  </el-upload>
  </div>
  <br>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
  </div>
</template>
<script>
  import Dropzone from '@/components/Dropzone'

  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    components: { Dropzone },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      dropzoneS(file) {
        console.log(file)
        this.$message({ message: 'Upload success', type: 'success' })
      },
      dropzoneR(file) {
        console.log(file)
        this.$message({ message: 'Delete success', type: 'success' })
      }
    }
  }
</script>
